<!--
 * @Author: your name
 * @Date: 2020-12-09 10:47:38
 * @LastEditTime: 2020-12-30 14:20:03
 * @LastEditors: Please set LastEditors
 * @Description: 活动详情
 * @FilePath: \h5-zhuhaiyun20201209\pages\activityDetail\activityDetail.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <!-- css begin -->
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css">
    <link rel="stylesheet" href="../../css/mescroll/mescroll.min.css">
    <link rel="stylesheet" href="../../css/animation/animation.css">
    <link rel="stylesheet" href="../../css/main/main.css">
    <link rel="stylesheet" href="../../css/zz/activityDetail/activityDetail.css">
    <!-- css end -->
    <title>活动详情</title>
</head>

<body>

    <transition name="van-fade">
    <div style="display:none;" class="zz-container" v-show="zzShowPage">
    <div class="bg">
        <img class="zz-img-fit" :src="activityInfo.titleImage" alt="">
    </div>
    <div class="zz-title">
        <span class="txt">
            活动介绍
            <span class="circle left"></span>
            <span class="circle right"></span>
        </span>
    </div>
    <div class="info-area">
        <ul class="">
            <li class="list-item zz-df zz-df-ai-c">
                <span class="zz-df-title">活动时间：</span>
                <div class="zz-df-content">{{activityInfo.startTime+' 至 '+activityInfo.endTime}}</div>
            </li>
            <li class="list-item zz-df zz-df-ai-c">
                <span class="zz-df-title">活动地点：</span>
                <div class="zz-df-content">{{activityInfo.address}}</div>
            </li>
            <li class="list-item zz-df zz-df-ai-c">
                <span class="zz-df-title">活动内容：</span>
                <!-- <div class="zz-df-content">{{activityInfo.address}}</div> -->
            </li>
        </ul>
        <div id="activity-content"></div>
    </div>
    <div class="btn-area zz-df zz-df-jc-sa">
        <span 
            class="zz-btn zz-btn-size zz-btn-border zz-btn-default"
            @click="backToActivityList">返回首页</span>
        <span 
            class="zz-btn zz-btn-size zz-btn-border zz-btn-primary"
            @click="joinActivity">立即报名</span>
    </div>
    <!-- 活动报名弹层 -->
    <van-popup v-model="applyVisible" closeable :round="true">
        <div class="apply-pop-content">
            <div class="title zz-df zz-df-ai-c zz-clamp">活动报名</div>
            <!--  -->
            <ul class="insert-list">
                <li class="insert-line">
                    <van-field 
                        v-model="applyPopArgs.name" 
                        placeholder="请输入你的称呼" 
                        input-align="center"
                        clearable />
                </li>
                <li class="insert-line">
                    <van-field 
                        v-model="applyPopArgs.mobile" 
                        type="tel"
                        placeholder="请输入你的联系电话" 
                        input-align="center"
                        clearable />
                </li>
                <li class="insert-line">
                    <van-field 
                        v-model="applyPopArgs.licenseNo" 
                        placeholder="请输入你的车牌号" 
                        input-align="center"
                        clearable />
                </li>
                <li 
                    class="insert-line"
                    @click="showETPop">
                    <van-field 
                        v-model="applyPopArgs.expireDate" 
                        placeholder="请选择你的车险到期时间" 
                        readonly
                        input-align="center" />
                </li>
            </ul>
            <!--  -->
            <div class="zz-df zz-df-jc-c">
                <van-checkbox v-model="userReadedRule" shape="square">我已阅读活动规则</van-checkbox>
            </div>
            <!--  -->
            <div class="btn-line">
                <span 
                    class="zz-btn zz-btn-block zz-btn-size-block zz-btn-primary"
                    @click.stop="submitApplyInfo">立即提交</span>
            </div>
        </div>
    </van-popup>
    <!-- 选择车险到期时间的弹层 -->
    <van-popup
        v-model="selectETVisible"
        :round="true"
        position="bottom"
    >
        <van-datetime-picker
            v-model="ETDate"
            type="date"
            title="请选择你的车险到期时间"
            @confirm="selectETConfirm"
            @cancel="selectETCancel"
        />
    </van-popup>
    <!-- 活动报名成功弹层 -->
    <van-popup
        v-model="applySuccVisible"
        :round="true"
    >
        <div class="apply-succ-pop-content zz-df zz-df-ff-cw zz-df-ai-c">
            <div class="icon">
                <img class="zz-img-fit" src="../../images/activityList/succ.png" alt="">
            </div>
            <div class="desc zz-ta-c">活动报名成功！工作人员<br/>会尽快联系您，请保持电话畅通！</div>
            <div class="btn-line">
                <span 
                    class="zz-btn zz-btn-block zz-btn-size-block zz-btn-primary" @click="closeApplySuccPop">我知道了</span>
            </div>
        </div>
    </van-popup>
    </div>
    </transition>


    <!-- script begin -->
    <script src="../../js/jquery/jquery-3.2.1.min.js"></script>
    <script src="../../js/jquery/jquery.cookie.js"></script>
    <script src="../../js/underscode/underscore-min.js"></script>
    <script src="../../js/vue/vue.min.js"></script>
    <script src="../../js/vue/mixins/zzSetRem.js"></script>
    <script src="../../js/vant/vant.min.js"></script>
    <script src="../../js/axios/axios.min.js"></script>
    <script src="../../js/mescroll/mescroll.min.js"></script>
    <script src="../../js/zz/tool/tool.js"></script>
    <script src="../../js/zz/time/time.js"></script>
    <script src="../../js/zz/request/index.js"></script>
    <script src="../../js/zz/activityDetail/activityDetail.js"></script>
    <!-- script end -->
</body>

</html>